<template>
  <div class="address">
    <!-- 面包屑 -->
    <section class="breadcrumb">
      <div class="container">
        <router-link to="/">首页</router-link>
        <span>/</span>
        <router-link to="/user-center">个人中心</router-link>
        <span>/</span>
        <span>地址管理</span>
      </div>
    </section>

    <!-- 主体 -->
    <main class="container">
      <div class="address-header">
        <h1>我的收货地址</h1>
        <router-link to="/addaddress" class="add-btn">
          <i class="fa fa-plus"></i> 添加新地址
        </router-link>
      </div>

      <!-- 地址列表 -->
      <div class="address-list">
        <div
          v-for="(addr, index) in addresses"
          :key="addr.id"
          class="address-card"
          :class="{ default: addr.isDefault }"
          :style="{ 'animation-delay': index * 0.1 + 's' }"
        >
          <div class="info">
            <div class="name-line">
              <h3>{{ addr.name }}</h3>
              <span v-if="addr.isDefault" class="default-tag">默认地址</span>
              <button
                v-else
                class="set-default-btn"
                @click="setDefault(addr.id)"
              >
                设为默认
              </button>
            </div>
            <p class="phone">{{ addr.phone }}</p>
            <p class="detail">{{ addr.detail }}</p>
          </div>
          <div class="actions">
            <router-link
              :to="'/editaddress?id=' + addr.id"
              class="edit"
            >
              <i class="fa fa-pencil"></i> 编辑
            </router-link>
            <button class="delete" @click="openDelete(addr.id)">
              <i class="fa fa-trash"></i> 删除
            </button>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-if="!addresses.length" class="empty">
          <i class="fa fa-map-marker"></i>
          <h3>您还没有保存的收货地址</h3>
          <p>添加收货地址，让您的购物更便捷</p>
          <router-link to="/add-address" class="add-first">
            <i class="fa fa-plus"></i> 添加第一个地址
          </router-link>
        </div>
      </div>
    </main>

    <!-- 底部 -->
    <Footer />

    <!-- 返回顶部 -->
    <transition name="fade">
      <button class="back-top" v-show="showTop" @click="toTop">
        <i class="fa fa-arrow-up"></i>
      </button>
    </transition>

    <!-- 删除确认弹窗 -->
    <transition name="fade">
      <div v-if="deleteModalOpen" class="modal-mask" @click.self="closeDelete">
        <div class="modal">
          <h3>确认删除</h3>
          <p>您确定要删除这个地址吗？删除后将无法恢复。</p>
          <div class="modal-actions">
            <button class="cancel" @click="closeDelete">取消</button>
            <button class="confirm" @click="confirmDelete">确认删除</button>
          </div>
        </div>
      </div>
    </transition>

    <!-- 成功提示 -->
    <transition name="toast">
      <div v-if="toastOpen" class="toast">
        <i class="fa fa-check-circle"></i>
        <span>{{ toastMsg }}</span>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "Address",
  computed:{
  userProfile(){
    return this.$store.state.profile
  }
},
  data() {
    return {
      mobileMenuOpen: false,
      showTop: false,
      deleteModalOpen: false,
      toastOpen: false,
      toastMsg: "",
      currentDelId: null,
      addresses: []
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  created() {
    this.getaddress(this.userProfile?.id)
  },
  methods: {
    toggleMenu() {
      this.mobileMenuOpen = !this.mobileMenuOpen;
    },
    handleScroll() {
      this.showTop = window.scrollY > 300;
    },
    toTop() {
      window.scrollTo({ top: 0, behavior: "smooth" });
    },
    openDelete(id) {
      this.currentDelId = id;
      this.deleteModalOpen = true;
    },
    closeDelete() {
      this.deleteModalOpen = false;
      this.currentDelId = null;
    },
    confirmDelete() {
      const idx = this.addresses.findIndex(a => a.id === this.currentDelId);
      if (idx === -1) return;

      const wasDefault = this.addresses[idx].isDefault;
      this.addresses.splice(idx, 1);

      // 如果删除的是默认且还有地址，把第一条设为默认
      if (wasDefault && this.addresses.length) {
        this.addresses[0].isDefault = true;
      }

      this.closeDelete();
      this.showToast("地址删除成功");
    },
    setDefault(id) {
      this.addresses.forEach(a => (a.isDefault = a.id === id));
      this.showToast("已设为默认地址");
    },
    getaddress(id){
      return this.$axios.get(`http://127.0.0.1:8000/userAddress/${id}`)
          .then(res =>{
            const list = res.data
            this.addresses = list.map(
                res =>({
                  id : res.id,
                  user_id : res.user_id,
                  phone : res.phone,
                  name : res.recipient_name,
                  detail : res.province+" "+res.city+" "+res.county+" "+res.detail_address,
                  isDefault:res.is_default
                })
            )
            console.log(this.details)
            return this.addresses;

          })

          .catch(err => {
            console.error('加载地址失败', err);
            this.addresses = [];
          });

    },
    showToast(msg) {
      this.toastMsg = msg;
      this.toastOpen = true;
      setTimeout(() => {
        this.toastOpen = false;
      }, 3000);
    }
  }
};
</script>

<style scoped>
/* 全局变量/通用 */
:root {
  --primary: #8b5a2b;
  --secondary: #d2b48c;
  --accent: #cd853f;
  --light: #f5f5dc;
  --dark: #3e2723;
  --radius: 12px;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 顶部导航 复制自 About.vue */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.notify-bar {
  background: #8b5a2b;
  color: #fff;
  text-align: center;
  font-size: 14px;
  padding: 6px 0;
}
.notify-bar a {
  text-decoration: underline;
  margin-left: 4px;
}
.main-nav .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 700;
  color: #8b5a2b;
}
.search-box {
  position: relative;
  flex: 1;
  max-width: 320px;
  margin: 0 24px;
}
.search-box input {
  width: 100%;
  padding: 8px 36px 8px 16px;
  border-radius: 20px;
  border: 1px solid #ccc;
}
.search-box i {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
}
.icons {
  display: flex;
  gap: 16px;
  align-items: center;
}
.icon-btn {
  position: relative;
  font-size: 20px;
  color: #333;
}
.badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #4ade80;
  color: #fff;
  font-size: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
}
.desktop-menu {
  display: flex;
  gap: 32px;
  justify-content: center;
  background: #8b5a2b;
  padding: 10px 0;
}
.desktop-menu a {
  color: #fff;
  padding: 4px 12px;
  border-radius: 4px;
  transition: background 0.3s;
}
.desktop-menu a.active,
.desktop-menu a:hover {
  background: #3e2723;
}
.mobile-menu {
  display: none;
  flex-direction: column;
  background: #fff;
  border-top: 1px solid #eee;
}
.mobile-menu a {
  padding: 12px 24px;
  border-bottom: 1px solid #eee;
  color: #333;
}
@media (max-width: 768px) {
  .search-box,
  .desktop-menu {
    display: none;
  }
  .hamburger {
    display: block;
  }
  .mobile-menu {
    display: flex;
  }
}

/* 面包屑 */
.breadcrumb {
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 12px 0;
  font-size: 14px;
  color: #666;
}
.breadcrumb a {
  color: #8b5a2b;
}
.breadcrumb span {
  margin: 0 6px;
}

/* 主体区域 */
main {
  padding: 40px 0;
}
.address-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}
.address-header h1 {
  font-size: 28px;
  font-weight: 700;
}
.add-btn {
  background: var(--primary);
  color: #fff;
  padding: 8px 20px;
  border-radius: var(--radius);
  transition: background 0.3s;
}
.add-btn:hover {
  background: var(--dark);
}

/* 地址卡片 */
.address-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  animation: slideIn 0.3s ease-out both;
}
@keyframes slideIn {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.address-card.default {
  border-left: 4px solid var(--primary);
}
.name-line {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.name-line h3 {
  font-weight: 600;
  margin-right: 12px;
}
.default-tag {
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
}
.set-default-btn {
  font-size: 12px;
  color: var(--primary);
  border: 1px solid var(--primary);
  padding: 2px 8px;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.phone,
.detail {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}
.actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.actions a,
.actions button {
  font-size: 14px;
  background: none;
  border: none;
  cursor: pointer;
}
.edit {
  color: var(--primary);
}
.delete {
  color: #e53e3e;
}

/* 空状态 */
.empty {
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  border-radius: var(--radius);
}
.empty i {
  font-size: 48px;
  color: #bbb;
  margin-bottom: 16px;
}
.empty h3 {
  margin-bottom: 8px;
}
.empty p {
  color: #777;
  margin-bottom: 20px;
}
.add-first {
  background: var(--primary);
  color: #fff;
  padding: 10px 24px;
  border-radius: var(--radius);
  display: inline-block;
}

/* 底部 复制自 About.vue */
.site-footer {
  margin-top: 80px;
  background: var(--dark);
  color: #fff;
  padding: 48px 24px 24px;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}
.footer-brand i {
  color: var(--secondary);
}
.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.footer-social a {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background 0.3s;
}
.footer-social a:hover {
  background: rgba(255, 255, 255, 0.2);
}
.footer-col h4 {
  font-size: 18px;
  margin-bottom: 16px;
  font-weight: 600;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col li {
  margin-bottom: 8px;
  font-size: 14px;
  color: #ccc;
}
.footer-col li a {
  color: #ccc;
  text-decoration: none;
}
.footer-col li a:hover {
  color: #fff;
}
.footer-bottom {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 14px;
  color: #aaa;
}

/* 返回顶部 */
.back-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 999;
  display: grid;
  place-items: center;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 删除确认弹窗 */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal {
  background: #fff;
  border-radius: var(--radius);
  padding: 24px;
  width: 90%;
  max-width: 400px;
}
.modal h3 {
  margin-bottom: 8px;
}
.modal p {
  margin-bottom: 20px;
  color: #555;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.modal-actions button {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}
.modal-actions .cancel {
  border: 1px solid #ccc;
  background: #fff;
}
.modal-actions .confirm {
  background: #e53e3e;
  color: #fff;
  border: none;
}

/* toast */
.toast {
  position: fixed;
  top: 100px;
  right: 24px;
  background: #38a169;
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 60;
}
.toast-enter-active,
.toast-leave-active {
  transition: transform 0.3s;
}
.toast-enter-from,
.toast-leave-to {
  transform: translateX(100%);
}

/* 响应式 */
@media (max-width: 600px) {
  .address-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .actions {
    margin-top: 12px;
    flex-direction: row;
  }
}
</style>